<template>
  <div class="app-container">
    <div style="display: flex;justify-content: center;margin-bottom: 20px">
      <el-button v-waves :loading="downloadLoading" style="background-color: #4ab7bd;border-color: #4ab7bd" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        请先下载填空题上传模板
      </el-button>
    </div>
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import waves from '@/directive/waves' // Waves directive
import { reqInsertFillList } from '@/api/bankManage'
export default {
  name: 'FillUpload',
  components: { UploadExcelComponent },
  directives: { waves },
  data() {
    return {
      downloadLoading: false,
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '(必填)题目内容',
          '(必填)题目答案(填写正确答案字符串)',
          '(选填)答案解析',
          '(必填)所属科目(Java填1,C++填2,高等数学填3,英语填4,web填5,数据结构填6,python填7,C语言填8,计算机网络填9)'
        ]
        excel.export_json_to_excel({
          header: tHeader,
          data: [],
          filename: '填空题上传模板'
        })
        this.downloadLoading = false
      })
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '请上传小于1M的文件',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      const fillList = []
      results.forEach((item, index) => {
        const fill = {}
        Object.keys(item).forEach((key) => {
          if (key === '(必填)题目内容') {
            fill.fillContent = item[key]
          }
          if (key === '(必填)题目答案(填写正确答案字符串)') {
            fill.fillAnswer = item[key]
          }
          if (key === '(选填)答案解析') {
            fill.answerExplain = item[key]
          }
          if (key === '(必填)所属科目(Java填1,C++填2,高等数学填3,英语填4,web填5,数据结构填6,python填7,C语言填8,计算机网络填9)') {
            fill.langId = item[key]
          }
        })
        fillList.push(fill)
      })
      this.insertFillList(fillList)
      this.tableData = results
      this.tableHeader = header
    },
    // 插入数据库填空题表
    async insertFillList(fillList) {
      const result = await reqInsertFillList(fillList)
      if (result.statu === 0) {
        this.$message({
          message: result.msg,
          type: 'success'
        })
      } else {
        this.$message({
          message: result.msg,
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>

</style>
